<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 对不识别viewport设备优化 -->
    <meta name="HandheldFriendly" content="true">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <title>加分认证 | 商超世界</title>
    <link rel="icon" type="image/x-icon" href="../favicon.ico" />
    <link rel="stylesheet" type="text/css" href="../public/css/reset.css">
    <script type="text/javascript" src="../public/js/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/extra.css">
</head>

<body>
    <header>
        <a onclick="javascript:window.history.back(-1);return false" class="back">
            <img src="./images/back.png" alt="">
        </a>
        加分认证
    </header>
    <div class="main">
        <section>
            <h3>工作信息</h3>

            <!-- 工作类型 -->
            <div class="profession">
                <span>工作类型</span>
                <div class="choice">
                    <label class="item active" for="work">
                        <input type="radio" name="radio1" id="work" />
                        <i></i>
                        <span>上班族</span>
                    </label>
                    <label class="item" for="free">
                        <input type="radio" name="radio1" id="free" />
                        <i></i>
                        <span>自由职业</span>
                    </label>
                    <label class="item" for="student">
                        <input type="radio" name="radio1" id="student" />
                        <i></i>
                        <span>学生</span>
                    </label>
                </div>
            </div>

            <!-- 资料填写 -->
            <ul class="input">
                <!-- 单位地址 -->
                <li>
                    <span>单位名称</span>
                    <input type="text" placeholder="请填写单位名称" />
                </li>
                <!-- 单位地址 -->
                <li>
                    <span>单位地址</span>
                    <input type="text" placeholder="请填写单位地址" />
                </li>
                <!-- 单位电话 -->
                <li>
                    <span>单位电话</span>
                    <input type="tel" placeholder="请填写单位电话" />
                </li>
                <!-- 工作时长 -->
                <li>
                    <span>工作时长</span>
                    <input type="number" placeholder="请填写工作时长" />
                </li>
                <!-- 发薪日期 -->
                <li>
                    <span>发薪日期</span>
                    <input type="text" placeholder="请填写发薪日期" />
                </li>
            </ul>

            <!-- 图片上传 -->
            <div class="upload">
                <h4>上传工作证照</h4>
                <ul class="clearfix">
                    <li>
                        <img src="./images/example5.png" alt="">
                        <p>示例</p>
                    </li>
                    <li>
                        <label class="addPhoto" for="front">
                            <img src="./images/upload.png" alt="">
                            <br/>
                        </label>
                        <!--点击上传图片后显示 -->
                        <div class="display frontImg">
                            <!-- 图片预览 -->
                            <img class="preview" height="100%">
                            <!-- 重新上传、删除 -->
                            <span class="photoOpe">
                                <label class="uploadLabel front" for="front">重新上传</label>
                                <label class="del">删除</label>
                                <form class="form">
                                    <input type="file" accept="image/jpg,image/jpeg,image/png" contenteditable="false" id="front">
                                </form>
                            </span>
                        </div>
                        <p>正面</p>
                    </li>
                </ul>
            </div>
        </section>

        <section>
            <h3>更多信息</h3>
            <ul class="input">
                <li style="border:0;">
                    <span>淘宝账号</span>
                    <input type="text" placeholder="请填写淘宝账号" />
                </li>
                <!-- 常用邮箱 -->
                <li>
                    <span>常用邮箱</span>
                    <input type="email" placeholder="请填写常用邮箱" />
                </li>
                <!-- QQ账号-->
                <li>
                    <span>QQ账号</span>
                    <input type="number" placeholder="请填写QQ账号" />
                </li>
                <!-- 微信账号 -->
                <li>
                    <span>微信账号</span>
                    <input type="text" placeholder="请填写微信账号" />
                </li>
            </ul>
        </section>

        <!-- 提交 -->
        <input type="button" value="提交" class="submit">
    </div>
</body>

</html>